<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>赋值运算符(Assignment Operators)</title>
  <!-- 
    赋值运算符用于将值赋给变量。

    1. 赋值运算符  `=` 
    - 功能：将右侧的值赋给左侧的变量。
    let a = 5; // 将 5 赋值给变量 a

    2. 加赋值运算符  `+=` 
    - 功能：将右侧的值加到左侧的变量上，并将结果赋值给左侧变量。
    let a = 5;
    a += 3; // 相当于 a = a + 3, 结果 a 为 8

    3. 减赋值运算符  `-=` 
    - 功能：将右侧的值从左侧的变量中减去，并将结果赋值给左侧变量。
    let a = 5;
    a -= 2; // 相当于 a = a - 2, 结果 a 为 3

    4. 乘赋值运算符  `*=` 
    - 功能：将左侧的变量与右侧的值相乘，并将结果赋值给左侧变量。
    let a = 5;
    a *= 2; // 相当于 a = a * 2, 结果 a 为 10

    5. 除赋值运算符  `/=` 
    - 功能：将左侧的变量除以右侧的值，并将结果赋值给左侧变量。
    let a = 10;
    a /= 2; // 相当于 a = a / 2, 结果 a 为 5

    6. 取余赋值运算符  `%=` 
    - 功能：将左侧的变量与右侧的值取余，并将结果赋值给左侧变量。
    let a = 5;
    a %= 2; // 相当于 a = a % 2, 结果 a 为 1

    7. 幂赋值运算符  `**=` 
    - 功能：将左侧的变量与右侧的值进行幂运算，并将结果赋值给左侧变量。
    let a = 2;
    a **= 3; // 相当于 a = a ** 3, 结果 a 为 8

  总结表
| 运算符 | 名称       | 功能描述                                           | 示例                 |
|--------|------------|--------------------------------------------------|----------------------|
|  `=`     | 赋值       | 将右侧的值赋给左侧的变量                           |  `let a = 5;`         |
|  `+=`    | 加赋值     | 将右侧的值加到左侧变量上并赋值                     |  `a += 3;`            |
|  `-=`    | 减赋值     | 从左侧变量中减去右侧的值并赋值                     |  `a -= 2;`            |
|  `*=`    | 乘赋值     | 将左侧变量与右侧的值相乘并赋值                     |  `a *= 2;`            |
|  `/=`    | 除赋值     | 将左侧变量除以右侧的值并赋值                       |  `a /= 2;`            |
|  `%=`    | 取余赋值   | 将左侧变量与右侧的值取余并赋值                     |  `a %= 2;`            |
|  `**=`   | 幂赋值     | 将左侧变量与右侧的值进行幂运算并赋值               |  `a **= 3;`           |

   -->
</head>
<body>

  <script>
    // 1. 赋值运算符 `=` 
    let a1 = 5;
    let b1 = a1;

    // 2. 链式赋值运算符
    let a2 = b2 = 10;

    // 3. 解构赋值运算符
    let [a, b, c] = [1, 2, 3];

    // 4. 箭头函数赋值运算符
    const add = (a, b) => a + b;

    // 5. 对象属性赋值运算符
    const obj = { a: 1, b: 2 };
    obj.a = 3;

    // 6. 数组元素赋值运算符
    const arr = [1, 2, 3];
    arr[0] = 4;

    // 7. 字符串赋值运算符
    let str = "hello";
    str = "world";

    // 8. 布尔值赋值运算符
    let bool = true;
    bool = false;

    // 9. null赋值运算符
    let n = null;
    n = 10;

    // 10. undefined赋值运算符
    let u = undefined;
    u = 20;

    // 11. 数字赋值运算符
    let num = 5;
    num += 2;
    num -= 2;
    num *= 2;
    num /= 2;
    num %= 2;
    num **= 3;
    console.log("数字赋值运算符", num);

    // 12. 自增和自减赋值运算符
    // 12.1. 自身操作自增和自减无区别, ++i 和 i++ 的区别, ++i 先自增再赋值
    let i = 0;
    i++;
    console.log("自增和自减赋值运算符+", i);
    ++i;
    console.log("自增和自减赋值运算符+", i);
    i--;
    console.log("自增和自减赋值运算符-", i);
    --i;
    console.log("自增和自减赋值运算符-", i);
    // 12.1. 自身操作自增和自减又在其他表达式中有区别, ++i 和 i++ 的区别, ++i 先自增再赋值
    let currentIndex = 6
    let j = 10 + ++currentIndex;
    console.log("自增和自减赋值运算符+", j);
    // let k = 10 + currentIndex++;
    // console.log("自增和自减赋值运算符-", k);
    // 12.2. 自身操作自增和自减无区别, ++i 和 i++ 的区别, ++i 先自增再赋值
    let currentIndex2 = 6
    let j2 = 10 + --currentIndex2;
    console.log("自增和自减赋值运算符+", j2);
    // let k2 = 10 + currentIndex2--;
    // console.log("自增和自减赋值运算符-", k2);

    
  </script>
  
</body>
</html>